<template>
  <div ref="echartsRef" :style="{ width: width, height: height }"></div>
</template>
  
  <script >
import { defineComponent, onMounted, toRefs, ref, watch } from "vue";
import * as echarts from "echarts";
import { generateRandomString } from "@/util/index";

export const cellProps = {
  width: {
    type: [Number, String],
    default: "300px",
  },
  height: {
    type: [Number, String],
    default: "250px",
  },
  option: {
    type: Object,
    default: () => ({}),
  },
};

export default defineComponent({
  props: cellProps,

  setup(props, { slots }) {
    const { width, height } = toRefs(props);

    const echartsRef = ref(null);
    onMounted(() => {
      initEcharts();
    });

    watch(
      () => props.option,
      () => {
        initEcharts();
      }
    );
    watch(
      () => props.width,
      () => {
        initEcharts();
      }
    );

    const initEcharts = () => {
      const myChart = echarts.init(echartsRef.value);
      myChart.setOption(props.option);
    };

    return {
      echartsRef,
      width,
      height,
      initEcharts,
    };
  },
});
</script>
  